<!-- 客户列表的二级筛选 -->
<script setup lang="ts">
import { debounce } from '@antfu/utils'
type TabValueType = String | Number
interface TabOption {
  name: String
  value: TabValueType
}
const props = defineProps({
  circleTabOptions: {
    type: Array<TabOption>,
    default: () => [{ name: '', value: 1 }],
  },
  defaultTab: {
    type: String || Number || undefined,
    default: undefined,
  },
})
const emit = defineEmits(['change'])
const activeCircleTab = ref<TabValueType>()
const left = ref(0)

function circleTabChange(circleTabValue: TabValueType) {
  activeCircleTab.value = circleTabValue
  emit('change', activeCircleTab.value)
}
function scrollLeft() {
  left.value -= 188
}
function scrollRight() {
  left.value += 188
}
function scrollTab(e: any) {
  left.value = e.target.scrollLeft
}
const scroll = debounce(500, scrollTab)
onMounted(() => {
  activeCircleTab.value = props.defaultTab ? props.defaultTab : props.circleTabOptions?.[0].value
})

defineExpose({
  circleTabChange
})
</script>

<template>
  <view class="flex items-center relative w-full">
    <view v-if="left > 5" class="arrow" @click="scrollLeft"><up-icon name="arrow-left" size="14"></up-icon></view>
    <scroll-view scroll-x="true" @scroll="scroll" :scrollLeft="left"
      :style="{ width: 'calc(100% - ' + (0 + (left < 414 ? 48 : 0) + (left > 5 ? 48 : 0)) + 'rpx)' }">
      <view class="sub-tab">
        <view v-for="circleTab in circleTabOptions" :key="circleTab.value" class="sub-tab-item"
          :class="{ active: activeCircleTab === circleTab.value }" @click="circleTabChange(circleTab.value)">
          {{ circleTab.name }}<span>({{ circleTab?.count || 0 }})</span>
        </view>
      </view>
    </scroll-view>
    <view v-if="left < 414" class="arrow right-0" @click="scrollRight"><up-icon name="arrow-right" size="14"></up-icon>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.arrow {
  width: 48rpx;
  height: 48rpx;
  flex: 1;
  background: #F6F6F6;
  border-radius: 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
}

.sub-tab {
  display: flex;
  align-items: center;
  padding: 12rpx 32rpx;
  width: 1500rpx;
  z-index: 2;

  .sub-tab-item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    width: 188rpx;
    height: 64rpx;
    background: #F6F6F6;
    border-radius: 40rpx;
    // font-size: 28rpx;
    color: #666;

    &+.sub-tab-item {
      margin-left: 16rpx;
    }

    &.active {
      background: $theme-color;
      color: #fff;
    }
  }
}
</style>
